// 将角度转换为弧度（用于Canvas的旋转计算）
const D6 = 6 * Math.PI / 180   // 6度对应的弧度值
const D30 = 30 * Math.PI / 180 // 30度对应的弧度值（时钟刻度间隔）
const D90 = 90 * Math.PI / 180 // 90度对应的弧度值

module.exports = canvas => {
    const ctx = canvas.getContext('2d') // 获取2D绘图上下文

    // 计算表盘半径（画布宽度的一半减去30px外边距）
    var radius = canvas.width / 2 - 30

    return () => {
        // 清除画布（每次重绘前清空）
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 将坐标系原点移到画布中心（方便旋转操作）
        ctx.translate(canvas.width / 2, canvas.height / 2)

        // 绘制表盘
        drawDial(ctx, radius)

        // 绘制时钟指针
        drawHand(ctx, radius)

        // 恢复画布初始状态（重要：避免旋转/平移操作影响后续绘制）
        ctx.rotate(D90)                // 逆时针旋转90度（抵消初始旋转）
        ctx.translate(-canvas.width / 2, -canvas.height / 2) // 移回原点
        ctx.restore()                  // 恢复保存的画布状态
    }
}

// 绘制表盘函数（包含刻度、数字和中心装饰）
function drawDial(ctx, radius) {
    // 绘制外层大圆（表盘轮廓）
    ctx.lineWidth = '2'              // 设置线宽为2px
    ctx.beginPath()                  // 开始新路径
    ctx.arc(0, 0, radius, 0, 2 * Math.PI, true) // 绘制圆形路径（参数：x,y,半径,起始角,结束角,是否逆时针）
    ctx.stroke()                     // 描边绘制

    // 绘制中心小圆（固定轴心）
    ctx.lineWidth = '1'              // 设置线宽为1px
    ctx.beginPath()
    ctx.arc(0, 0, 8, 0, 2 * Math.PI, true) // 绘制半径8px的中心圆
    ctx.stroke()

    // 绘制大刻度（12个主刻度）
    ctx.lineWidth = '5'              // 设置线宽为5px
    for (var i = 0; i < 12; ++i) {
        ctx.rotate(D30)               // 每次旋转30度（360/12）
        ctx.beginPath()
        ctx.moveTo(radius, 0)         // 起始点在表盘边缘
        ctx.lineTo(radius - 15, 0)    // 向内绘制15px长的刻度线
        ctx.stroke()
    }

    // 绘制小刻度（60个分钟刻度）
    ctx.lineWidth = '1'              // 设置线宽为1px
    for (var i = 0; i < 60; ++i) {
        ctx.rotate(D6)                // 每次旋转6度（360/60）
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 10, 0)    // 向内绘制10px长的刻度线
        ctx.stroke()
    }

    // 绘制数字（1-12）
    ctx.font = '22px sans-serif'    // 设置字体
    ctx.textBaseline = 'middle'     // 文本基线对齐方式
    var r = radius - 30             // 数字显示位置半径（比表盘小30px）

    for (var i = 1; i <= 12; ++i) {
        // 计算每个数字的坐标（使用三角函数定位）
        var x = r * Math.cos(D30 * i - D90) // 调整-90度使12点方向朝上
        var y = r * Math.sin(D30 * i - D90)

        // 微调数字位置（根据数字位数调整偏移量）
        if (i > 10) {
            ctx.fillText(i, x - 12, y)  // 11、12号数字左移12px
        } else {
            ctx.fillText(i, x - 6, y)   // 其他数字左移6px
        }
    }

    /**
     * 三角函数作用：极坐标系与直角坐标系的转换
     * 核心公式：x = r*cosθ, y = r*sinθ
     * 通过三角函数将极坐标（半径r，角度θ）转换为直角坐标系的(x,y)坐标
     * 12小时刻度循环通过i从1到12，对应角度从-90°到270°（覆盖完整圆周）
     * 从角度的情况看，每个小时的夹角角度是30˚，1点对应30˚，2点对应60˚...角度位置使用弧度代替
     * 
     */
}

// 绘制指针函数（时针、分针、秒针）
function drawHand(ctx, radius) {
    var t = new Date()               // 获取当前时间
    var h = t.getHours()             // 获取小时（24小时制）
    var m = t.getMinutes()           // 获取分钟
    var s = t.getSeconds()           // 获取秒数

    h = h > 12 ? h - 12 : h         // 转换为12小时制

    // 初始旋转-90度（使0点方向朝上，因为Canvas默认0度朝右）
    ctx.rotate(-D90)

    // 绘制时针
    ctx.save()                       // 保存当前绘图状态
    ctx.rotate(D30 * (h + m / 60 + s / 3600)) // 计算时针角度（小时+分钟比例+秒数比例）
    ctx.lineWidth = '6'              // 设置线宽
    ctx.beginPath()
    ctx.moveTo(-20, 0)               // 起点左移20px（留出轴心空间）
    ctx.lineTo(radius / 2.6, 0)     // 绘制到半径1/2.6的位置
    ctx.stroke()
    ctx.restore()                    // 恢复之前保存的绘图状态

    // 绘制分针
    ctx.save()
    ctx.rotate(D6 * (m + s / 60))    // 计算分针角度（分钟+秒数比例）
    ctx.lineWidth = '4'
    ctx.beginPath()
    ctx.moveTo(-20, 0)
    ctx.lineTo(radius / 1.8, 0)     // 绘制到半径1/1.8的位置
    ctx.stroke()
    ctx.restore()

    // 绘制秒针
    ctx.save()
    ctx.rotate(D6 * s)               // 计算秒针角度
    ctx.lineWidth = '2'
    ctx.beginPath()
    ctx.moveTo(-20, 0)
    ctx.lineTo(radius / 1.6, 0)     // 绘制到半径1/1.6的位置
    ctx.stroke()
    ctx.restore()
}